<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="/js/textBoxAutoHeight.js"></script><!--此文件用来使得textarea自动调节它的高度-->
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
    <link href="/css/submitOj.css" rel="stylesheet" type="text/css"/>
    <link href="/css/submit_style.css" rel="stylesheet" type="text/css"><!--此文件用来存储提交状态的样式-->
    <script type="module" src="/js/changeAndBan_tab_.js"></script><!--此js文件是用来ban掉并且修改tab键的一些不便的功能-->
</head>
<body>
<div class="nav">
    <ul class="menu">
        <li class="lli"><a href="#" title="首页" target="_self">首页</a></li>
        <li class="lli"><a href="#" title="项目" target="_blank">题库</a></li>
        <li class="lli"><a href="#" title="论坛" target="_blank">论坛</a></li>
        <li class="btn"><input id="search" type="search" placeholder="Search..." autofocus required/>
            <button type="submit">Go</button>
        </li><!--搜索框-->
        <li class="image">
            <img src="/imgs/225默认头像(1).png" height="30px" alt=""/> | 用户名 &emsp;&emsp;
            <a href="#">登录 | 注册</a>
        </li>

    </ul>
</div>
<br><br><br><br>
<div class="container"><!--表格部分-->
    <h2 id="QesName">Title</h2><br><br>
    <h3>题目描述</h3><br>
    <p id="QesDes" class="pi"></p><br>
    <h3>测试样例</h3><br>
    <p id="QesExample" class="pi"></p><br>
    <!--    <h3>输出样例</h3><br>-->
    <!--    <p class="pi"></p><br>-->
    <!--    <form style="height: 400px;">-->
    <h3>题目代码</h3><br>
    <div id="mian">
        <!--
                <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
        -->
        <textarea id="test" name="content" onkeyup="keyUp()" tabindex="0" style="min-height: 790px"
                  onscroll="getId('leftNum').scrollTop = this.scrollTop;"></textarea>
    </div>
    <br>
    <hr color="#F8F8F8">
    <div id="container-Submission-errorInformation"></div>
    <div id="container-Submission-status"></div><!--此div中就是表示提交的状态-->
    <div id="container-Submission-status-image"></div>
    <br>
    <br>
    <button onclick="submitJava()" class="submit-button"
            style="left: 50%;background-color:deepskyblue;color: white; height: 30px; width: 70px; border-radius: 6px; border-style: none; cursor: pointer; ">
        提交
    </button>
    <br><br>
    <!--    </form>-->

</div>

<!--导入axios文件-->
<script src="js/axios-0.18.0.js"></script>

<script type="text/javascript"> //滚动条设置 目前已经删除了 没啥用
var num = "";
var test = getId('test');

function getId(obj) {
    return document.getElementById(obj);
}

function keyUp() {/*按键被释放时触发*/
    var str = test.value;
    str = str.replace(/\r/gi, "");
    str = str.split("\n");
    var n = str.length;
    line(n);
}

function line(n) {
    let lineobj = getId("leftNum");
    for (let i = 1; i <= n; i++) {
        if (document.all) {
            num += i + "\r\n";//判断浏览器是否是IE
        } else {
            num += i + "\n";
        }
    }
    lineobj.value = num;
    num = "";
}

(function () {
    keyUp();
})();
</script>
<script>
    function getId() { //获取当前题目的id
        let result;
        let url = window.location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) {
            result = url.substr(url.indexOf("=") + 1);
        }
        return result;
    }

    window.onload = function () { //页面加载时显示题目的信息
        // alert(getId());
        axios({
            method: "post",
            url: "http://localhost:8080/getJavaById/" + getId(),
            // data: "id=" + getId()
        }).then(function (resp) {
            let problem = resp.data.data;
            //回显题目内容
            document.getElementById("QesName").innerText = problem.title;
            document.getElementById("QesDes").innerText = problem.description;
            document.getElementById("QesExample").innerText = problem.example;
            document.getElementById("test").value = problem.template;
        })
    }

    function submitJava() {
        //转一下码 要不然+、=、&等特殊符号发不过去
        let code = encodeURIComponent(document.getElementById("test").value);
        let $div = $(`#container-Submission-status`);
        let $divErrorShow = $(`#container-Submission-errorInformation`);
        let $divImageShow = $(`#container-Submission-status-image`)

        $div.html(" Judging");
        $divErrorShow.removeClass('container-Submission-errorInformation-open');//将divErrorShow的窗口关闭掉
        $divErrorShow.html('');
        $divImageShow.addClass('container-Submission-status-image');//添加图片
        $div.css({
            'font-size': '21px',
            color: '#4B8ABF'
        });
        //https://cdn.acwing.com/static/web/gif/code_status_loading.gif//y总的图片
        //之后要加上去的图片（虽然是抄了acwing的）
        axios({
            method: "post",
            url: "http://localhost:8080/testJavaById/" + getId(),
            data: "code=" + code
        }).then(function (resp) {
            $divImageShow.removeClass('container-Submission-status-image');//删除当前图片
            let res = resp.data.data;
            //alert(res);
            if (res == 666) { //题目正确
                //alert("答案正确");
                $div.html(" Accepted");
                $div.css({
                    color: '#449D44',
                    'font-size': '21px',
                });
            } else if (res == 233) {//答案错误的反应
                //alert("答案错误");
                $div.html("Wrong Answer");
                $div.css({
                    color: '#D05451',
                    'font-size': '21px'
                });
            } else if (res.error == 1) {
                //alert("编译错误");
                $div.html("Compilation Error");
                $div.css({
                    color: '#D05451',
                    'font-size': '21px'
                });
                $divErrorShow.addClass(`container-Submission-errorInformation-open`);
                // $divErrorShow.html('编译的错误信息在这里');
                $divErrorShow.html(res.reason);
                // /*从responseErrorServlet中获得编译错误的信息输在div中*/
                // //AJAX - XMLHttpRequest 对象
                // let xhttp;
                // if (window.XMLHttpRequest) {
                //     xhttp = new XMLHttpRequest();
                // } else {
                //     // code for IE6, IE5
                //     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                // }
                //
                // //向服务器发送请求
                // xhttp.open("GET", "http://localhost:8080/YsuCode-demo/responseErrorServlet", true);
                // xhttp.send();
                //
                // //AJAX - 服务器响应
                // xhttp.onreadystatechange = function () {
                //     console.log("start");
                //     console.log(this.responseText);
                //     if (this.readyState == 4 && this.status == 200) {
                //         let resText = this.responseText;
                //
                //         $divErrorShow.html(this.responseText);
                //         console.log(this.responseText);
                //     }
                // };
                /*从responseErrorServlet中获得编译错误的信息输在div中*/

            } else if (res == 2) {
                //alert("运行错误");
                $div.css({
                    color: '#8D44AD',
                    'font-size': '21px'
                });
                $div.html("Run Error");
            } else {
                //alert("未知错误");
                $div.html("Unknown Error");
                $div.css({
                    color: '#D05451',
                    'font-size': '21px'
                });
            }

        })
    }

</script>

</body>
</html>